<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .inp {
      box-sizing: border-box;
      position: relative;
      width: 250px;
      height: 30px;
      border: 2px solid #ccc;
      border-radius: 6px;
      padding-left: 5px;

      /* 2.2 输入框-获焦时动画过渡效果 */
      transition: all .5s;
      /* 3.1 如下属性, 可用于改变输入框中光标的颜色 */
      caret-color: #ff6347;
    }

    /* 1. 输入框-占位文本 样式设置： */
    .inp::placeholder {
      padding-left: 5px;
      font-size: 12px;
      color: gray;
    }

    /* 2. 输入框-获焦边框 样式设置： */
    .inp:focus {
      /* 2.1 去除获得焦点时, 输入框默认出现的 → "焦点框" */
      outline: none;
      border: 2px solid #4A90E2;

      /* 2.2 给焦点边框设置 →渐变效果(该方法看情况使用) */
      /* border-image: linear-gradient(#fbc2eb, #a6c1ee) 1; */
    }
  </style>
</head>
<body>
  <h3>输入框样式设置：</h3>
  <input type="text" placeholder="请输入内容....." class="inp">

</body>
</html>